Pourquoi adapter sur mobile (et autres écrans) ?
Il est primordial qu'un site web soit utilisable sur mobile. En 2016, le mobile dépassait le pc classique en trafic de navigation sur le web et ne fait qu'augmenter depuis.
(presque 70% en 2020 en France ! Source mediametrie : https://www.mediametrie.fr/fr/lannee-internet-2020)
Aujourd'hui, ne pas rendre son site web responsive c'est faire une croix sur 70% des potentiels visiteurs !
Adapter la taille sur mobile
Pour commencer, une page web sur mobile apparaîtra toute petite à cause de la très petite taille de l'écran d'un smartphone. Pour remettre le tout à l'échelle, il faut intégrer cette balise dans le head de la page web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Comment adapter un site web à la taille de l'écran ?
Responsive Web Design désigne le fait qu'un site web est construit de manière à le rendre compatible, lisible et utilisable sur différentes tailles d'écrans.
Il existe plusieurs techniques permettant de faire du responsive. Une technique qui se faisait beaucoup était de créer deux site distincts : un pour desktop et un pour mobile. Cette technique a été très utilisée dans le début des années 2010.
Exemple avec Wikipédia :
Version Desktop : https://fr.wikipedia.org/wiki/France
Version mobile : https://fr.m.wikipedia.org/wiki/France
Bien que fonctionnelle, cette technique est très coûteuse car elle demande de créer plusieurs sites web au lieu d'un seul. Elle tend a être abandonnée au profit de la technique suivante.
Média queries
Les media queries sont des conditions CSS permettant d'appliquer des styles CSS seulement si ces conditions sont remplies. Ces conditions portent toujours sur les caractéristiques de l'agent utilisateur utilisé pour rendre la page web (navigateur, imprimante, lecteur d'écran, etc...)
/* De manière normale les textes de la page web seront bleus */
body{
color: blue;
}
/* Cette média query s'activera seulement si l'agent utilisateur est une imprimante (le texte sera rouge au lieu d'être bleu !) */
@media print {
body{
color: red;
}
}
Autre exemple vérifiant que l'agent utilisateur est bien un écran et que la taille de l'écran soit au minimum de 768px :
/* Par défaut le titre h1 fera 1.2rem */
h1{
color : blue;
font-size: 1.2rem;
}
/* Cette média query s'activera seulement si l'agent utilisateur est un écran et si cet écran fait au moins 768px de large */
@media screen and (min-width: 768px) {
/* Sur des écran assez large (au moins 768px), le titre h1 sera plus grand avec une taille de 2rem */
h1{
font-size: 2rem;
}
}
Vous pouvez tester plusieurs tailles de fenêtre sur Firefox avec le raccourci "CTRL + SHIFT + M"
Polyfill sur Internet Explorer avant la version 9
Internet Explorer a besoin d'un polyfill pour que les media queries fonctionnent dessus (à mettre dans le head de la page web) :
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Mobile First
Mobile First est une stratégie visant à concevoir un site web d'abord pour mobile, puis ensuite à utiliser les media queries pour le rendre bien sur les tailles d'écrans plus élevées.
Cette stratégie est très importante car il est beaucoup plus facile de transformer un site web mobile avec des media queries que l'inverse !
Cette stratégie repose également sur les conceptes suivants :
- Rester sur l'essentiel
- Ne rien ajouter de superflue
- Pouvoir accéder le plus rapidement et facilement possible aux infos
- Cibler les performances
Optimiser le chargement des fichiers CSS avec la minification
La minification est une optimisation des fichiers CSS (JS aussi) consistant à compacter au maximum le code en supprimant tout les éléments inutiles du fichier (retours à la ligne, commentaires, etc...).
La minification rend le fichier illisible pour un être humain. En général on garde la version "normale" du fichier puis on en crée une copie minifiée avant la mise en production du site pour l'intégrer et ainsi augmenter les performances de chargement du site.
Certains sites en ligne proposent des minifier en ligne comme celui là : https://cssminifier.com/
/* Exemple d'un fichier CSS normal */
body{
background-color: black;
font-family: sans-serif;
}
h1{
font-size: 1.6rem;
color: red;
}
@media screen and (min-width: 768px) {
h1{
font-size: 1.3rem;
}
}
/* Même fichier en version minifiée */
body{background-color:#000;font-family:sans-serif}h1{font-size:1.6rem;color:red}@media screen and (min-width:768px){h1{font-size:1.3rem}}